<template>
  <div>
    <el-color-picker v-model="themeColor" :predefine="predefineColors" />
  </div>
</template>

<script lang="ts" setup>
import { useThemeSettingStore } from "@/stores/themeSettingStore";
const themeStore = useThemeSettingStore();
const themeColor = ref(themeStore.themeState.theme);
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585"
]);

//监听themeColor响应式数据的变化
watch(themeColor, (newColor, oldColor) => {
  console.log("newColor==", newColor, "oldColor===", oldColor);
  themeStore.changeTheme({ key: "theme", value: newColor });
});
</script>

<style lang="scss" scoped></style>
